import React ,{ useState,useEffect }from 'react';
import { Paper, Grid, Typography, Box } from '@mui/material';
import recommend1 from '../resources/recommend/recommend1.png';
import recommend2 from '../resources/recommend/recommend2.png';
import recommend3 from '../resources/recommend/recommend3.png';
import recommend4 from '../resources/recommend/recommend4.png';
import recommend5 from '../resources/recommend/recommend5.png';
import recommend6 from '../resources/recommend/recommned6.png';
import { useNavigate } from 'react-router-dom';
import { fetchRecommendVideos } from '../api/recommend';
//recommend video!!
function Recommend() {
  // const videos = [
  //   { title: "[派派晚自习128]无名游龙爆杀观赏性满分，SWQ单局20杀统治常规赛", img: recommend1, id: 1 },
  //   { title: "乐评绝区零1.7主线 最让我红温的反派 快成为人类吧！", img: recommend2, id: 2 },
  //   { title: "乐山607元海鲜自助，畅吃鲜活帝王蟹、小青龙！不限时不限量！", img: recommend3, id: 3 },
  //   { title: "单曲循环|【Hard melody】|《马达加斯加企鹅の小曲》《这一块の", img: recommend4, id: 4 },
  //   { title: "【Mande中文】一刀未剪｜我在第24賽季遇到最刺激的一場！這就是", img: recommend5, id: 5 },
  //   { title: "你看不懂的代码，它可以", img: recommend6, id: 6 },
  // ];
const [videos, setVideos] = useState([]);
  const navigate = useNavigate();
  const userId = localStorage.getItem("id");
  useEffect(() => {
    fetchRecommendVideos(userId)
      .then(response => {
        console.log(response);
        setVideos(response);
      })
      .catch(error => {
        console.error('获取热门视频失败:', error);
      });
  }, []);
  const handleClick = (id) => {
    navigate(`/seed/${id}`);
  };
 
  
  return (
    <Grid container spacing={2}>
      {videos.map((video) => (
        <Grid item xs={4} sm={4} key={video.torrent.id}>
          <Box 
            onClick={() => handleClick(video.torrent.id)}
            sx={{ 
              display: 'flex', 
              flexDirection: 'column', 
              alignItems: 'center',
              cursor: 'pointer',
              '&:hover': {
                transform: 'scale(1.02)',
                transition: 'transform 0.3s ease'
              },
            }}>
            <img 
              src={video.coverImageBase64} 
              alt={video.torrent.name||video.torrent.fileName} 
              style={{ 
                width: '2', 
                maxWidth: '250px',
                borderRadius: '8px',
                height: '150px',
                objectFit: 'cover'
              }} 
            />
            <Typography 
              variant="body1" 
              sx={{ 
                mt: 1, 
                textAlign: 'center',
                fontWeight: 'medium',
                maxWidth: '200px',
                display: '-webkit-box',
                overflow: 'hidden',
                WebkitBoxOrient: 'vertical',
                WebkitLineClamp: 2, // 控制最多显示2行
                textOverflow: 'ellipsis'
              }}
            >
              {video.torrent.name||video.torrent.fileName}
            </Typography>
          </Box>
        </Grid>
      ))}
    </Grid>
  );
}

export default Recommend;